<template>
	<div class="login-box">
		<header>
			<a href="#">
				<el-avatar
					src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
				/>
			</a>
		</header>
		<div class="main">
			<div class="title">
				<h1>注册完成</h1>
				<p>请验证您的 Email</p>
				<img src="../../assets/images/login_img1.svg" alt="" />
			</div>
			<p class="tip">
				您的帳號尚未驗證成功，請至您的 Email 信箱收取驗證信，並於 1
				小時內完成驗證。
			</p>
			<p class="email">1315165022@qq.com</p>
			<div class="btn">
				<el-button type="danger" round>重新登录</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from "vue";
</script>

<style lang="scss" scoped>
header {
	position: sticky;
	top: 0em;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 100%;
	height: 4rem;
	z-index: 30;
	background: #ffffff;
	display: flex;
	align-items: center;
}

.main {
	width: 100%;
	margin: 0 auto;
	max-width: 32rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 4rem;
	.title {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		h1 {
			font-size: 1.25rem;
			font-weight: 400;
			line-height: 4rem;
			letter-spacing: 0.05em;
			color: #1a202c;
			padding: 1rem;
			height: 4rem;
		}
		p {
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			letter-spacing: 0.05em;
			color: #1a202c;
			text-align: center;
		}
	}

	.tip {
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 2;
		letter-spacing: 0.05em;
		color: #718096;
		text-align: center;
	}
	.email {
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 2;
		letter-spacing: 0.05em;
		color: #2d3748;
		text-align: center;
		margin-bottom: 2rem;
	}

	.btn {
		display: flex;
		justify-content: center;
		margin-bottom: 2rem;
		:deep(.el-button) {
			width: 100%;
			max-width: 16rem;
			padding: 0 1rem;
			height: 3rem;
			line-height: 3rem;
			border-radius: 50rem;
		}
	}
}
</style>